<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome Extension I18n Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .language-section {
            margin: 30px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .language-section h3 {
            margin-top: 0;
            color: #333;
        }
        .message-item {
            margin: 10px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 5px;
        }
        .message-key {
            font-weight: bold;
            color: #007bff;
        }
        .message-value {
            margin-left: 20px;
            color: #333;
        }
        .instructions {
            background: #e7f3ff;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }
        .warning {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌍 Chrome Extension I18n Test</h1>
        
        <div class="instructions">
            <h3>测试说明 / Test Instructions</h3>
            <p><strong>中文:</strong> 这个页面用于测试Chrome扩展的国际化配置。请检查下面的消息是否正确配置。</p>
            <p><strong>English:</strong> This page is used to test the internationalization configuration of Chrome extensions. Please check if the messages below are configured correctly.</p>
        </div>

        <div class="warning">
            <p><strong>注意:</strong> 这个页面仅用于开发测试，不会包含在最终的扩展包中。</p>
            <p><strong>Note:</strong> This page is for development testing only and will not be included in the final extension package.</p>
        </div>

        <div class="language-section">
            <h3>🇨🇳 中文 (简体) - zh_CN</h3>
            <div id="zh-messages"></div>
        </div>

        <div class="language-section">
            <h3>🇺🇸 English - en</h3>
            <div id="en-messages"></div>
        </div>

        <div class="language-section">
            <h3>📋 消息对比 / Message Comparison</h3>
            <div id="comparison"></div>
        </div>
    </div>

    <script>
        // 中文消息
        const zhMessages = {
            "extensionName": "LyricsPinyin - 中文歌词拼音",
            "extensionDescription": "快速搜索中文歌词拼音，提升发音学习效果",
            "appTitle": "🎵 LyricsPinyin",
            "appSubtitle": "中文歌词拼音搜索",
            "searchTipsTitle": "搜索技巧:",
            "searchTipsText": "使用中文搜索歌名和歌手名",
            "searchTipsExample": "例如: 月亮代表我的心, 邓丽君, 告白气球",
            "searchPlaceholder": "输入中文歌名、歌手或歌词...",
            "searchButton": "搜索",
            "searchNotice": "请输入中文歌名以获得最准确的拼音结果",
            "searching": "搜索中...",
            "searchResults": "搜索结果",
            "resultsCount": "找到 {count} 个结果",
            "viewLyrics": "查看歌词 →",
            "noResults": "没有找到相关结果",
            "noResultsTip": "请尝试使用中文歌名或歌手名搜索",
            "visitWebsite": "访问完整网站",
            "errorMessage": "搜索失败，请检查网络连接或稍后重试",
            "errorRetry": "请稍后重试",
            "enterKeyword": "请输入搜索关键词"
        };

        // 英文消息
        const enMessages = {
            "extensionName": "LyricsPinyin - Chinese Lyrics with Pinyin",
            "extensionDescription": "Quickly search Chinese lyrics with pinyin to improve pronunciation learning",
            "appTitle": "🎵 LyricsPinyin",
            "appSubtitle": "Chinese Lyrics Pinyin Search",
            "searchTipsTitle": "Search Tips:",
            "searchTipsText": "Use Chinese characters for song names and artist names",
            "searchTipsExample": "Examples: 月亮代表我的心, 邓丽君, 告白气球",
            "searchPlaceholder": "Enter Chinese song name, artist, or lyrics...",
            "searchButton": "Search",
            "searchNotice": "Please enter Chinese song names for the most accurate pinyin results",
            "searching": "Searching...",
            "searchResults": "Search Results",
            "resultsCount": "Found {count} results",
            "viewLyrics": "View Lyrics →",
            "noResults": "No results found",
            "noResultsTip": "Please try using Chinese song names or artist names",
            "visitWebsite": "Visit Full Website",
            "errorMessage": "Search failed, please check network connection or try again later",
            "errorRetry": "Please try again later",
            "enterKeyword": "Please enter search keyword"
        };

        function displayMessages(messages, containerId, title) {
            const container = document.getElementById(containerId);
            
            Object.entries(messages).forEach(([key, value]) => {
                const messageDiv = document.createElement('div');
                messageDiv.className = 'message-item';
                messageDiv.innerHTML = `
                    <div class="message-key">${key}:</div>
                    <div class="message-value">${value}</div>
                `;
                container.appendChild(messageDiv);
            });
        }

        function displayComparison() {
            const container = document.getElementById('comparison');
            
            Object.keys(zhMessages).forEach(key => {
                const comparisonDiv = document.createElement('div');
                comparisonDiv.className = 'message-item';
                comparisonDiv.innerHTML = `
                    <div class="message-key">${key}:</div>
                    <div class="message-value">
                        <strong>中文:</strong> ${zhMessages[key]}<br>
                        <strong>English:</strong> ${enMessages[key] || '<span style="color: red;">Missing!</span>'}
                    </div>
                `;
                container.appendChild(comparisonDiv);
            });
        }

        // 页面加载时显示消息
        window.onload = function() {
            displayMessages(zhMessages, 'zh-messages', '中文消息');
            displayMessages(enMessages, 'en-messages', 'English Messages');
            displayComparison();
        };
    </script>
</body>
</html> 